<template>
	<div class="card-header-box">
		<el-form ref="queryForm" :inline="true" :model="standardPreparationProgress" :rules="rules">
			<el-row>
				<el-col :span="12">
					<el-form-item label="项目编号:" style="width: 80%">
						<el-input v-model="standardProjectInfo.projectNumber" disabled placeholder="项目编号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="标准名称:" style="width: 80%" prop="standardProjectName">
						<el-input v-model="standardPreparationProgress.standardProjectName" :disabled="!getshow" placeholder="标准名称"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="主管单位:" style="width: 80%">
						<el-input v-model="standardProjectInfo.responsibleOrgName" disabled placeholder="主管单位"></el-input>

						<!-- <ma-dict-select
							v-model="standardProjectInfo.job_status"
							dict-type="post_status"
							clearable
							placeholder="主管单位"
							:List="jdstatuslist"
						></ma-dict-select> -->
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item prop="actualAllocationFunding" label="实际拨付经费(万元):" style="width: 80%">
						<el-input v-model="standardPreparationProgress.actualAllocationFunding" :disabled="!getedit" placeholder="实际拨付经费(万元)"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item prop="proposedFunding" label="拟拨付经费(万元):" style="width: 80%">
						<el-input v-model="standardPreparationProgress.proposedFunding" :disabled="!getedit" placeholder="拟拨付经费(万元)"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item prop="professionalKeyFields" label="专业及重点领域划分:" style="width: 80%">
						<el-select
							v-model="standardPreparationProgress.professionalKeyFields"
							multiple
							placeholder="请选择"
							style="width: 100%"
							:disabled="!getedit"
						>
							<el-option v-for="item in zylist" :key="item.id" :label="item.name" :value="item.code"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="立项时间:" style="width: 80%">
						<el-date-picker v-model="standardPreparationProgress.initiationTime" disabled type="date" value-format="YYYY-MM-DD" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="进度状态:" style="width: 80%">
						<el-select v-model="standardPreparationProgress.progressStage" disabled placeholder="请选择" style="width: 100%">
							<el-option v-for="item in jdstatuslist" :key="item.id" :label="item.name" :value="item.code"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="备注:" style="width: 100%">
						<el-input v-model="standardPreparationProgress.progressRemark" placeholder="备注" :disabled="!getedit"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<div class="titlezi flex">
			<div class="flex-1">主编单位</div>
			<el-button v-if="getshow" type="primary" small @click="newadditem">新增</el-button>
		</div>

		<el-table
			v-loading="loading"
			:data="datalist"
			stripe
			class="mt20"
			element-loading-background="rgba(0, 0, 0, 0.5)"
			element-loading-text="加载中..."
			header-row-class-name="table-header"
		>
			<el-table-column label="次序" align="center" prop="orderName"> </el-table-column>
			<el-table-column label="单位名称" align="center">
				<template #default="scope">
					<el-input v-model="scope.row.editorUnitName" placeholder="单位名称" :disabled="!getshow"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="企业社会信息代码" align="center">
				<template #default="scope">
					<el-input v-model="scope.row.userCode" placeholder="企业社会信息代码" :disabled="!getshow"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="联系人" align="center">
				<template #default="scope">
					<el-input v-model="scope.row.contacts" placeholder="联系人" :disabled="!getshow"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="联系电话" align="center">
				<template #default="scope">
					<el-input v-model="scope.row.contactsTel" placeholder="联系电话" :disabled="!getshow"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="负责人" align="center">
				<template #default="scope">
					<el-input v-model="scope.row.responsiblePerson" placeholder="负责人" :disabled="!getshow"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="负责人电话" align="center">
				<template #default="scope">
					<el-input v-model="scope.row.responsiblePersonTel" placeholder="负责人电话" :disabled="!getshow"></el-input>
				</template>
			</el-table-column>
			<el-table-column v-if="getshow" label="操作" fixed="right" header-align="center" align="center" width="150">
				<template #default="{ $index }">
					<!-- <el-icon style="color: #1491ff" @click="clickedit(scope.row)" class="mr20 cursor"><Edit /></el-icon> -->
					<el-icon class="ml20 cursor" style="color: #fe6360" @click="deleitem($index)"><Delete /></el-icon>
				</template>
			</el-table-column>
		</el-table>

		<div v-if="getanniu" class="dialog-footer mt10">
			<el-button type="primary" @click="submit">保存</el-button>
			<el-button @click="router.go(-1)">取消</el-button>
		</div>
	</div>
</template>
<script setup lang="ts">
import { basicInfoApi, updateBasicApi } from '@/api/bianzhi/index'
import { router } from '@/router'
import { useDictionaryStore } from '@/store/modules/dictionary'
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, defineProps, nextTick, onMounted, reactive, ref, watch } from 'vue'
const props = defineProps({
	datainfo: {
		type: Object,
		default: () => ({})
	}
})

const loading = ref(false)
const standardProjectInfo = ref({
	progressRemark: '',
	responsibleOrgName: '',
	projectNumber: '',
	orginalStandardProjectName: '',
	professionalKeyFields: []
})
const standardPreparationProgress = ref({
	initiationTime: '',
	progressStage: '',
	progressStatus: '',
	actualAllocationFunding: '',
	proposedFunding: '',
	professionalKeyFields: [],
	progressRemark: '',
	standardProjectName: ''
})

const queryForm = ref()

const datalist = ref([]) //表单数据
const dictionaryStore = useDictionaryStore()
const zylist = dictionaryStore.getDictionaryByCode('T003')
const jdstatuslist = dictionaryStore.getDictionaryByCode('T007')

const isedit = ref(false)
const rules = reactive({
	standardProjectName: [
		{
			required: (props.datainfo.isshen == 'true' || props.datainfo.isshen) && props.datainfo.edit == 'true', //  角色必填
			message: '请填写标准名称',
			trigger: 'blur'
		}
	],
	professionalKeyFields: [{ required: true, message: '请选择专业及重点领域划分', trigger: 'change' }],
	proposedFunding: [{ required: true, message: '请输入拟拨付经费(万元)', trigger: 'blur' }],
	actualAllocationFunding: [{ required: true, message: '请输入实际拨付经费(万元)', trigger: 'blur' }]
})
watch(
	() => props.datainfo,
	(newVal: any, oldVal: any) => {
		nextTick(() => {
			isedit.value = props.datainfo.edit == 'true' ? true : false
			basicInfoApi({ id: props.datainfo.id }).then(res => {
				standardProjectInfo.value = res.data.standardProjectInfo
				standardPreparationProgress.value = res.data.standardPreparationProgress
				standardPreparationProgress.value.standardProjectName = res.data.standardProjectInfo.standardProjectName

				const aa = res.data.standardProjectInfo.professionalKeyFields.split(',')
				standardProjectInfo.value.professionalKeyFields = aa
				standardPreparationProgress.value.professionalKeyFields = aa
				datalist.value = res.data.projectEditorUnitList
			})
		})
	},
	{ immediate: true }
)

onMounted(() => {})
const deleitem = index => {
	ElMessageBox.confirm('确定要删除吗？', '删除', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		datalist.value.splice(index, 1)
	})
}

const getedit = computed(() => {
	if (props.datainfo.edit == 'true') {
		if (props.datainfo.isshen == 'true' || props.datainfo.isshen) {
			///可以编辑
			return true
		} else {
			if (Number(standardPreparationProgress.value.progressStatus) == 0 || Number(standardPreparationProgress.value.progressStatus) == 6) {
				//不可以编辑
				//console.log('252525252525252525wtwtwtwtwt2525')
				return true
			} else {
				return false
			}
		}
	} else {
		return false
	}
})

const getshow = computed(() => {
	if (props.datainfo.edit == 'true') {
		if (props.datainfo.isshen == 'true' || props.datainfo.isshen) {
			return true
		} else {
			return false
		}
	} else {
		return false
	}
})

const getanniu = computed(() => {
	if (props.datainfo.isshen == 'true' || props.datainfo.isshen) {
		if (props.datainfo.edit == 'true') {
			return true
		} else {
			return false
		}
	} else {
		if (props.datainfo.edit == 'true') {
			if (Number(standardPreparationProgress.value.progressStatus) == 0 || Number(standardPreparationProgress.value.progressStatus) == 6) {
				return true
			} else {
				return false
			}
		} else {
			return false
		}
	}
})
const clickedit = (item: any) => {
	item.iseditable = !item.iseditable
}
const submit = (item: any) => {
	if (datalist.value.length > 0) {
		datalist.value.forEach(item => {
			delete item.iseditable
		})
	}

	queryForm.value.validate(valid => {
		if (valid) {
			const data = {
				id: props.datainfo.id, //主键id
				standardProjectName: standardPreparationProgress.value.standardProjectName, //项目名称/标准名称
				actualAllocationFunding: standardPreparationProgress.value.actualAllocationFunding, //实际拨付经费
				proposedFunding: standardPreparationProgress.value.proposedFunding, //拟拨付经费
				professionalKeyFields: standardPreparationProgress.value.professionalKeyFields.join(','), //专业及重点领域分类，来自字典id,单选
				projectEditorUnitList: datalist.value,
				progressRemark: standardPreparationProgress.value.progressRemark ? standardPreparationProgress.value.progressRemark : ''
			}

			updateBasicApi(data).then(() => {
				ElMessage.success({
					message: '提交成功',
					duration: 3000
				})

				router.go(-1)
				//	router.push('/bianzhi/shenbao/index')

				basicInfoApi({ id: props.datainfo.id }).then(res => {
					standardProjectInfo.value = res.data.standardProjectInfo
					standardPreparationProgress.value = res.data.standardPreparationProgress
					standardPreparationProgress.value.standardProjectName = res.data.standardProjectInfo.standardProjectName
					const aa = res.data.standardProjectInfo.professionalKeyFields.split(',')
					standardProjectInfo.value.professionalKeyFields = aa
					standardPreparationProgress.value.professionalKeyFields = aa
					datalist.value = res.data.projectEditorUnitList
				})
			})
		} else {
			console.log('error submit!!')
			return false
		}
	})
}
const newadditem = () => {
	const list: any = {
		// orderName: '第' + Number(datalist.value.length + 1) + '主编单位',
		orderName: Number(datalist.value.length + 1),
		iseditable: false,
		editorUnitName: '',
		responsiblePerson: '',
		contacts: '',
		contactsTel: '',
		responsiblePersonTel: '',
		id: null,
		unitType: '0'
	}

	if (datalist.value.length >= 2) {
		ElMessageBox.confirm('依据编制要求建议主编单位不超过2个！', '温馨提示', {
			confirmButtonText: '继续增加',
			cancelButtonText: '关闭',
			type: 'warning'
		})
			.then(() => {
				datalist.value.push(list)
			})
			.catch(() => {})
	} else {
		datalist.value.push(list)
	}
}
</script>

<style lang="scss" scoped>
.card-header-box {
	display: flex;
	// align-items: center;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-around;
	overflow-y: scroll;
	height: 100%;

	&::-webkit-scrollbar {
		display: none;
	}

	.titlezi {
		font-size: 16px;
		color: #333;
	}
}
</style>
